<template>
  <div class="custom_page">
    <div class="content">
      <!-- 顶部搜索 -->
      <div class="toolbar formSearch">
        <!-- 顶部搜索 -->
        <el-form :inline="true" :model="query">
          <el-form-item label="店铺名称">
            <el-input v-model="query.shopName" maxlength="20" placeholder="请输入商家名称" />
          </el-form-item>
          <el-form-item label="经销商名称">
            <el-input v-model="query.dealerName" maxlength="20" placeholder="请输入商家名称" />
          </el-form-item>
          <el-form-item label-width="0">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button plain @click="handleReset">重置 </el-button>
          </el-form-item>
        </el-form>
      </div>
      <!--  表格 -->
      <el-table
        v-loading="state.tableLoading"
        :data="state.tableData"
        border
        :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
        style="width: 100%"
        class="dataTable"
      >
        <!-- <el-table-column prop="accountType" label="账户类型">
          <template #default="scope">
            {{ getAccountType(scope.row.accountType) }}
          </template>
        </el-table-column> -->
        <el-table-column prop="shopName" label="店铺名称" />
        <el-table-column prop="dealerName" label="经销商名称" />
        <el-table-column prop="dealerId" label="经销商ID" />
        <!-- <el-table-column prop="path" label="上级" /> -->
        <el-table-column prop="frozenBalance" label="冻结金额" />
        <el-table-column prop="balance" label="账户余额" />
        <el-table-column prop="deleteFlag" label="是否停用">
          <template #default="scope">
            <el-tag :type="!scope.row.deleteFlag ? 'success' : 'danger'">
              {{ !scope.row.deleteFlag ? '启用' : '停用' }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="handle" label="操作">
          <template #default="scope">
            <el-button link type="primary" @click="handleMove(scope.row)" v-if="scope.row.accountType == 'DEALER'">
              余额转移
            </el-button>
            <el-button v-if="!scope.row.deleteFlag" link type="primary" @click="handleManual(scope.row)">
              手动充值
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="page.page"
        v-model:page-size="page.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :total="page.total"
        style="margin: 20px 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <DialogMoveBalance ref="dialogMoveBalanceRef" :dealerOptions="state.dealerOptions" @ok="getTableData" />
    <ManualRecharge ref="manualRechargeRef" @update-data="uodateData" />
  </div>
</template>

<script setup>
import { getAccountList, getDealerlList } from '@/api/shop'
import { onMounted, ref, reactive } from 'vue'
import DialogMoveBalance from './DialogMoveBalance.vue'
import ManualRecharge from '@/views/finance/balance/ManualRecharge.vue'
// 自动充值弹窗
const manualRechargeRef = ref()
const state = reactive({
  tableLoading: false,
  tableData: [],
  dealerOptions: [],
  oriDealerOptions: []
})
const query = reactive({
  dealerName: '', // 经销商名称
  shopName: '' // 商家名称
})
const page = reactive({
  page: 1,
  pageSize: 10,
  total: 0
})

function getAccountType(type) {
  const typeD = {
    DEALER: '经销商',
    SHOP: '商家'
  }
  return typeD[type] || type
}
// 打开手动充值
const handleManual = (data) => {
  manualRechargeRef.value.getCurrent({ shopId: data.shopId, dealerId: data.dealerId })
}
const uodateData = () => getTableData()
onMounted(() => {
  getTableData()
  getAllList()
})
function handleSizeChange(val) {
  query.pageSize = val
  getTableData()
}

function handleCurrentChange(val) {
  query.page = val
  getTableData()
}
// 查询
function handleSearch() {
  page.total = 1
  query.page = 1
  getTableData()
}
// 清除
function handleReset() {
  query.dealerName = ''
  page.page = 1
  page.pageSize = 10
  getTableData()
}
function getAllList() {
  getDealerlList({ page: 1, pageSize: 999 })
    .then((res) => {
      state.oriDealerOptions = res.data
    })
    .finally(() => {
      state.tableLoading = false
    })
}
// 初始化查询所有数据
function getTableData() {
  state.tableLoading = true
  const params = { ...query, page: page.page, pageSize: page.pageSize }
  getAccountList(params)
    .then((res) => {
      state.tableData = res.data.list
      page.total = res.data.total
    })
    .finally(() => {
      state.tableLoading = false
    })
}

const dialogMoveBalanceRef = ref()
function handleMove(row) {
  const list = state.oriDealerOptions.filter((item) => item.id !== row.id)
  state.dealerOptions = [...list]
  console.log('sdf', state.dealerOptions)
  dialogMoveBalanceRef.value.show(row, state.dealerOptions)
}
</script>

<style lang="scss" scoped>
.custom_page {
  margin-top: 20px;
  .el-card {
    margin: 20px;
  }
  .content {
    padding: 20px;
    background-color: #ffffff;
  }
}
</style>
